<template>

	<view class="page_box" @tap="closeAllMenus">
		<view class="u-p-30">
			<view class="news-list">
				<view class="news-item" v-for="(item,i) in newslists" :key="i">
					<image v-if="item.thumb" class="image" :src="$IMG_URL+ item.thumb" mode="aspectFill"></image>
					<view class="u-flex u-row-center u-row-between">
						<view class="title">{{ item.title }}</view>
					</view>
					<view class="time">
						{{ item.create_time }}
						<view class="icon-wrap" @tap.stop>
							<u-icon class="icon" name="more-dot-fill" color="#707070" size="28"
								@tap="toggleMenu(item)"></u-icon>
							<shopro-menu :item="item" :visible="currentMenuId === item.id" @edit="handleEdit"
								@delete="handleDelete" @tot_up='tot_up' @close="closeMenu" />
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="footer">
			<button class="u-reset-button" @tap="jump('/pages/share/publish')">发布技术分享</button>
		</view>
		<u-select @confirm="confirm" value-name='day' v-model="show" label-name='name' :list="list"></u-select>

		<!-- <view @tap="closeAllMenus" class="overlay" v-if="hasVisibleMenu"></view> -->
	</view>
</template>

<script>
	import shoproMenu from '@/components/shopro-menu/shopro-menu.vue';
	export default {
		name: 'shareIndex',
		component: {
			shoproMenu
		},
		data() {
			return {
				show: false,
				list: [],
				currentMenuId: null, // 用于跟踪当前显示菜单的新闻项ID
				// newslists: [],
				newslists: [

				],
				listParams: {
					page: 1,
					pagesize: 10,
				},
				lastPage: 0,
				isEmpty: '',
				id: '',
			};
		},
		onLoad() {
			this.getTemplate();
			this.getConfig()
		},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getTemplate();
			}
		},
		methods: {
			confirm(e) {
				console.log(e)
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.setTop', {
					id: this.id,
					day: e[0].value,
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.loadStatus = 'nomore';
						uni.showToast({
							icon: 'none',
							title: res.msg
						})

					}
				});
			},
			getConfig() {

				this.$http('activity.getConfig', ).then(res => {
					if (res.code === 1) {
						console.log(res.data.job_top_money)
						this.list = res.data.job_top_money
					}
				});
			},
			// 商品列表
			getTemplate() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.mylist', that.listParams, '加载中...').then(res => {

					if (res.code === 1) {
						that.newslists = [...that.newslists, ...res.data.list];
						console.log(that.newslists)
						that.isEmpty = !that.newslists.length;
						that.lastPage = res.data.total;
						that.loadStatus = that.listParams.page < res.data.total_page ? 'loadmore' : 'nomore';
					}
				});
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			toggleMenu(newsItem) {
				if (this.currentMenuId === newsItem.id) {
					this.closeAllMenus();
				} else {
					this.currentMenuId = newsItem.id;
				}
			},
			handleEdit(editedItem) {
				console.log(`编辑新闻: ${editedItem.title}`);
				// this.jump('/pages/news/detail', {
				// 	id: editedItem.id
				// })
				this.jump('/pages/share/publish', {
					id: editedItem.id
				})
				this.closeAllMenus();
			},
			handleDelete(deletedItem) {
				console.log(`删除新闻: ${deletedItem.title}`);
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.share_del', {
					id: deletedItem.id
				}, '加载中...').then(res => {
					console.log(res)
					if (res.code === 1) {
						this.newslists = this.newslists.filter(item => item.id !== deletedItem.id);
						this.closeAllMenus();
						that.loadStatus = 'nomore'
					}
				});



			},
			tot_up(e) {
				console.log(e)
				this.id = e.id
				this.show = true
			},
			closeMenu() {
				this.currentMenuId = null;
			},
			closeAllMenus() {
				this.currentMenuId = null;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		padding-bottom: 124rpx;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		z-index: 5;
	}

	.news-list {
		.news-item {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}

			.image {
				width: 100%;
				max-height: 600rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
			}

			.title {
				color: #030D23;
				font-size: 28rpx;
				margin-right: 10rpx;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #707070;
				font-size: 24rpx;
				margin-top: 10rpx;

				.icon-wrap {
					position: relative;

					.icon {
						transform: rotate(90deg);
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		background-color: #fff;

		.u-reset-button {
			color: #fff;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			background-color: #E77817;
		}
	}
</style>
